<template>
  <div>
    <Echart
      id="energyCenterLeft1Chart"
      :options="options"
      height="4.5rem"
      width="4.125rem"
    ></Echart>
  </div>
</template>
<script type="text/javascript" src="utils/echarts-auto-tooltip.js"></script>
<script>
import Echart from '@/common/echart';
export default {
  data() {
    return {
      options: {},
    };
  },
  components: {
    Echart
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    cdata: {
      handler(newData) {
        this.options = {
          title: {
            text: "",
          },
          tooltip: {
            trigger: 'axis',
            backgroundColor: "rgba(255,255,255,0.1)",
            borderColor:  "rgba(255,255,255,0.1)",
            borderWidth: "0",
            textStyle: {
              color: "#c4c4c4"
            },
            axisPointer: {
              type: 'line',
              lineStyle: {
                color: 'rgba(0,0,0,0.2)',
                width: 1,
                type: 'solid'
              }
            }
          },

          legend: {
            data: newData.name
          },
          singleAxis: {
            top: 50,
            bottom: 50,
            axisTick: {},
            axisLabel: { interval: 0, rotate: 30, fontSize: 8},
            type: 'time',
            axisPointer: {
              animation: true,
              label: {
                show: true
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: 'dashed',
                opacity: 0.2
              }
            }
          },
          series: [
            {
              type: 'themeRiver',
              emphasis: {
                itemStyle: {
                  shadowBlur: 20,
                  shadowColor: 'rgba(0, 0, 0, 0.8)'
                }
              },
              data: newData.data
            }
          ]
        }
      },
      immediate: true,
      deep: true
    }
  }
};
</script>
